/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight,
    Alert,
    Platform
} from 'react-native';

import {Actions} from 'react-native-router-flux'
import CommonStyles from '../styles/common';
import Ionicons from 'react-native-vector-icons/Ionicons'
import Moment from 'moment'

export default class NewsItem extends Component {
    constructor (props) {
        super(props)
    }
    
    onPress(news)
    {
        Actions.newsDetail({id:news.id});
    }

    render() {
        Moment.updateLocale('en', {
            relativeTime : {
                future: "%s",
                past:   "%s前",
                s:  "秒",
                m:  "1分钟",
                mm: "%d分钟",
                h:  "1小时",
                hh: "%d小时",
                d:  "1天",
                dd: "%d天",
                M:  "1个月",
                MM: "%d个月",
                y:  "1年",
                yy: "%d年"
            }
        });
        
        var pubDate=Moment(this.props.news.pubDate);
        var dateStr=pubDate.fromNow();
        
        return (
          <View style={[CommonStyles.flex1]}>
              <TouchableHighlight 
                  underlayColor='#c8c7cc'
                  onPress={this.onPress.bind(this,this.props.news)}
              >
              <View style={styles.newsView}>
                  <Text style={styles.newsTitle}>{this.props.news.title['#cdata']}</Text>
                  <Text style={styles.newsBody}>{this.props.news.body['#cdata']}</Text>
                  <View style={styles.newsInfoView}>
                      <View style={styles.newsInfoItem}>
                          <Text style={styles.newsInfoText}>{this.props.news.author['#cdata']}</Text>
                      </View>
                      <View style={styles.newsInfoItem}>
                          <Ionicons name={(Platform.OS==='android'?'md':Platform.OS)+'-clock'} color='#ccc' size={12} />
                          <Text style={styles.newsInfoText}>{dateStr}</Text>
                      </View>
                      <View style={styles.newsInfoItem}>
                          <Ionicons name={(Platform.OS==='android'?'md':Platform.OS)+'-chatbubbles'} color='#ccc' size={12} />
                          <Text style={styles.newsInfoText}>{this.props.news.commentCount} </Text>
                      </View>
                  </View>
              </View>    
              </TouchableHighlight>        
          </View>
        );
    }
}

const styles = StyleSheet.create({
    newsView:
    {
        padding:5
    },
    newsTitle:{
        fontSize:18
    },
    newsBody:{
        fontSize:16,
        color:'#ccc'
    },
    newsInfoView:
    {
        flex:1,
        flexDirection: 'row',
        marginTop:5
    },
    newsInfoItem:{
        flexDirection: 'row',
        marginRight:10,
        alignItems:'center'
    },
    newsInfoText:
    {
        fontSize:12,
        color:'#bbb',
        marginLeft:2
    }
});
